<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 300px;
				height: 500px;
				border: 10px solid black;
				margin: 100px auto 0;
				position: relative;
				overflow: hidden;
			}

			#content {
				width: 1200px;
				height: 100%;
				position: absolute;
			}

			img {
				float: left;
				width: 300px;
				height: 500px;
				box-sizing: border-box;
				border: 10px ridge cyan;
			}

			.btns {
				position: relative;
				display: flex;
				justify-content: space-around;
				font-size: 30px;
				color: gray;
				font-weight: bolder;
				margin-top: 210px;
			}

			.btns>div {
				opacity: .7;
				cursor: pointer;
			}

			.pageControl {
				position: absolute;
				width: 100%;
				display: flex;
				/*height: 8px;*/
				/*background-color: yellow;*/
				bottom: 50px;
				justify-content: center;
			}

			.pageControl>span {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: white;
				margin: 0 15px;
			}

			

			.pageControl>.red {
				background-color: red;
			}


		</style>
	</head>
	<body>

		<div id="box">
			<div id="content">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/1.jpg" alt="">
			</div>

			<div class="btns">
				<div id="left"> ⬅️ </div>
				<div id="right"> ➡️ </div>
			</div>
			
			<div class="pageControl">
				<span class="red"></span>
				<span></span>
				<span></span>
			</div>


		</div>
		
	</body>
</html>
<script>
	
	// 轮播图对象
	var lunboObj = {

		// 标记轮播图位置
		left: 0,

		// 标记第几张图
		index: 0,

		// contentDiv
		contentDiv: document.getElementById('content'),

		// 存放span的类数组
		spanArr: document.querySelectorAll(".pageControl span"),

		// 轮播图动画
		startAnimation: animation,

		// 轮播图的初始化
		start: start,


		// 停止轮播动画
		stop: stop,

		// 改变页面控制器(小点点)的颜色
		changeDot: changeDot,

		// 点击动画
		clickAnimation: clickAnimation,

		// 初始化轮播图
		init: init


	};


	// 轮播图动画函数
	// 第一个参数: 每个周期移动的距离
	// 第二个参数: 向左走还是向右走
	// 第三个参数: 控制的元素
	function animation(s, flag, ele, _this) {

		// flag为true, 向左走, 否则向右走
		if (flag) {
			_this.left -= s;
		} else {
			_this.left += s;
		}
		// 改变dom
		// console.log(_this.left + 'px');
		ele.style.left = _this.left + 'px';

		if (_this.left % 300 == 0) {
			// 清除定时器
			clearInterval(_this.timerLB);

			_this.index += flag ? 1 : -1;

			// if (flag) {
			// 	_this.index++;
			// } else {
			// 	_this.index--;
			// }

			if (_this.index == 3) {
				// 变量清0
				_this.index = 0;
				_this.left = 0;
				_this.contentDiv.style.left = _this.left + 'px';
			}

			_this.changeDot();

			_this.timeout = setTimeout(function() {
				_this.start();
			}, 2000);
		}

	}

	// 轮播图初始化
	function start() {

		// 轮播图定时器
		this.timerLB = setInterval(this.startAnimation, 20, 3, true, this.contentDiv, this);
	}

	// 停止轮播图动画
	function stop() {
		// 清除定时器和延迟定时器
		clearInterval(this.timerLB);
		clearTimeout(this.timeout);
	}

	// 改变小点点
	function changeDot() {
		// 先把所有的span的class置空, 再把对应的span的class值改为red
		for (var i = 0; i < this.spanArr.length; i++) {
			this.spanArr[i].className = "";
		}
		var n = this.index == 3 ? 0 : this.index;
		this.spanArr[n].className = "red";
	}

	// 点击函数
	function clickAnimation(l) {
		var _this = this;
		// 获取初始值
		var start = _this.left;
		this.clickTimer = setInterval(function() {
			_this.left += l < 0 ? -1 : 1;
			_this.contentDiv.style.left = _this.left + 'px';

			// 路程走完
			if (_this.left - start == l) {
				clearInterval(_this.clickTimer);

				_this.index += l < 0 ? Math.ceil(Math.abs(l / 300)) : -Math.ceil(Math.abs(l / 300));
				if (l < 0) {
					if (_this.index == 3) {
						_this.index = 0;
						_this.left = 0;
						_this.contentDiv.style.left = _this.left + 'px';
					}

				} else {

					if (_this.index == -1) {
						_this.index = 3;
						_this.left = _this.index * -300;
						_this.contentDiv.style.left = _this.left + 'px';
					}
				}
				console.log(_this.index);

				_this.changeDot();
			}

		}, 10);

	}

	// 初始化函数
	function init() {
		this.start();
		var _this = this;
		// 获取boxDiv
		var boxDiv = document.getElementById('box');
		// 鼠标悬浮在元素上方时执行的方法(事件)
		boxDiv.onmouseover = function() {
			// 停止动画
			_this.stop();
		};

		// 鼠标离开元素上方时的事件
		boxDiv.onmouseout = function() {
			// 启动动画
			_this.start();
		};

		// 获取点击按钮
		var leftBtn = document.getElementById('left');
		var rightBtn = document.getElementById('right');

		rightBtn.onclick = function() {
			// 当前值
			var cur = _this.contentDiv.offsetLeft;
			// 要走的路程
			var l = (_this.index + 1) * (-300) - cur;
			_this.clickAnimation(l);
		};

		leftBtn.onclick = function() {
			// 当前值
			var cur = _this.contentDiv.offsetLeft;
			// 要走的路程
			// var l = (_this.index - 1) * (-300) - cur;

			var l = _this.index == 0 ? Math.abs(cur) : (_this.index - 1) * (-300) - cur;

			_this.clickAnimation(l);
		};

		for (var i = 0; i < this.spanArr.length; i++) {
			this.spanArr[i].num = i;
			this.spanArr[i].onclick = function() {
				var cur = _this.contentDiv.offsetLeft;
				var l = -300 * this.num - cur;
				_this.clickAnimation(l);
			};
		}


	}

	lunboObj.init();









</script>